<template>
  <div>
    <el-dialog
      :visible.sync="isshow"
      width="850px"
      :show-close="false"
      custom-class="my-cust-class"
    >
      <template #title>
        <div class="toptitle">
          <div class="toptip">
            <span class="tip">提示：</span>
            此为预览页面，不能参与作答
          </div>
          <div class="btns">
            <div
              :class="state == 1 ? 'btnitem a' : 'btnitem'"
              @click="changelook(1)"
            >
              <div class="btnicon"><i class="el-icon-mobile-phone"></i></div>
              手机预览
            </div>
            <div
              :class="state == 2 ? 'btnitem a' : 'btnitem'"
              @click="changelook(2)"
            >
              <div class="btnicon"><i class="el-icon-monitor"></i></div>
              电脑预览
            </div>
            <div class="btnitem" @click="cancle">
              <div class="btnicon"><i class="el-icon-circle-close"></i></div>
              取消预览
            </div>
          </div>
        </div>
      </template>
      <div class="content">
        <!-- 手机预览 -->
        <div v-show="state == 1" class="phone">
          <div class="questiontitle">
            <div style="font-weight: bold">{{ survey.surveyName }}</div>
            <div class="phonetext" v-html="survey.surveyDescription"></div>
          </div>
          <!-- 试题 -->
          <div class="questions">
            <div v-for="(item, index) in survey.questionList" :key="index">
              <div
                v-if="item.questionType != 3"
                :class="
                  item.requiredFlag == 1
                    ? 'required itemtitle'
                    : 'itemtitle titspace'
                "
              >
                <span style="min-width: 30px;">{{ index + 1 }}、</span>
                <span
                  v-html="item.questionName"
                  style="display: flex"
                  class="noneinput"
                ></span>
                <span style="margin-left: 10px">
                  <el-tag type="success">{{
                    typeList[item.questionType - 1]
                  }}</el-tag>
                </span>
              </div>

              <div v-else class="multTitle">
                <div class="gapFill">
                  <div
                    :class="
                      item.requiredFlag == 1
                        ? 'required itemtitle'
                        : 'itemtitle titspace'
                    "
                  >
                    {{ index + 1 }}、
                  </div>
                  <div style="display: flex;flex-wrap: wrap;">
                    <div v-for="(o, i) of item.questionNameList" :key="i" style="display: flex; align-items: center;">
                    <div
                      v-if="o.name != '</p>'"
                      style="display: flex; align-items: center;margin-bottom: 10px;"
                    >
                      <div v-html="o.name"></div>
                      <el-input
          v-input-restrict
                        v-if="i != item.questionNameList.length - 1"
                        disabled
                        placeholder="请输入内容"
                        style="
                        min-width: 120px;
                          width: 120px;
                          margin-left: 5px;
                          margin-right: 10px;
                        "
                      ></el-input>
                    </div>
                  </div> 
                  </div>
                  <span style="margin-left: 10px">
                    <el-tag type="success">{{
                      typeList[item.questionType - 1]
                    }}</el-tag>
                  </span>
                  
                </div>
              </div>
              <div
                v-if="item.questionDescription"
                style="
                 box-sizing: border-box;
                  padding-left: 30px;
                  font-size: 12px;
                  color: #ddd;
                  margin-bottom: 15px;
                 
                "
              >
                {{ item.questionDescription }}
              </div>
              <!-- 单选选择题 -->
              <div v-if="item.questionType == 1">
                <el-radio-group>
                  <div v-for="(e, index) in item.optionList" :key="index">
                    <div class="flleft">
                      <el-radio :label="e.optionName" disabled>{{
                        e.optionName
                      }}</el-radio>
                      <div
                        :class="e.requiredFlag ? 'required fl' : 'fl'"
                        v-if="e.fillFlag == 1"
                      >
                        <el-input
          v-input-restrict placeholder="请输入内容" disabled></el-input>
                      </div>
                    </div>

                    <div style="padding-left: 40px">
                      <img
                        :src="e.optionPicUrl"
                        alt=""
                        v-if="e.optionPicUrl"
                        style="width: 40px"
                      />
                    </div>
                  </div>
                </el-radio-group>
              </div>
              <!-- 多选选择题 -->
              <div v-if="item.questionType == 2">
                <div v-for="(e, index) in item.optionList" :key="index">
                  <div class="flleft">
                    <el-checkbox :label="e.optionName" disabled>{{
                      e.optionName
                    }}</el-checkbox>
                    <div
                      :class="e.requiredFlag ? 'required fl mr' : 'fl mr'"
                      v-if="e.fillFlag"
                    >
                      <el-input
          v-input-restrict placeholder="请输入内容" disabled></el-input>
                    </div>
                  </div>

                  <div style="padding-left: 40px">
                    <img
                      :src="e.optionPicUrl"
                      alt=""
                      v-if="e.optionPicUrl"
                      style="width: 40px"
                    />
                  </div>
                </div>
              </div>
              <!-- 简答题 -->
              <div v-if="item.questionType == 4" style="margin-left: 20px">
                <textarea
                  disabled
                  cols="60"
                  rows="3"
                  style="margin-top: 15px; border: 1px solid #ddd"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
        <!-- 电脑预览 -->
        <div v-show="state == 2" class="computer">
          <div class="computertitle">
            <div style="font-weight: bold">{{ survey.surveyName }}</div>
            <div class="computertext" v-html="survey.surveyDescription"></div>
          </div>
          <!-- 试题 -->
          <div class="computerquestions">
            <div v-for="(item, index) in survey.questionList" :key="index">
              <div
                v-if="item.questionType != 3"
                :class="
                  item.requiredFlag == 1
                    ? 'required itemtitle'
                    : 'itemtitle titspace'
                "
              >
                <span >{{ index + 1 }}、</span>
                <div style="display: flex;align-items: baseline;">
                  <span
                  v-html="item.questionName"
                  style="display: flex"
                  class="noneinput"
                ></span>
                <span style="margin-left: 10px">
                  <el-tag type="success">{{
                    typeList[item.questionType - 1]
                  }}</el-tag>
                </span>
                </div>
                
              </div>
              <div v-else class="multTitle">
                <div class="gapFill">
                  <div
                    :class="
                      item.requiredFlag == 1
                        ? 'required itemtitle'
                        : 'itemtitle titspace'
                    "
                  >
                    {{ index + 1 }}、
                  </div>
                  <div style="display: flex; flex-wrap: wrap; flex: 1">
                    <div v-for="(o, i) of item.questionNameList" :key="i" style="display: flex; align-items: center;">
                      <div
                        v-if="o.name != '</p>'"
                        style="display: flex; align-items: center;margin-bottom: 10px;"
                      >
                        <span v-html="o.name"></span>
                        <el-input
          v-input-restrict
                          v-if="i != item.questionNameList.length - 1"
                          disabled
                          placeholder="请输入内容"
                          style="
                          min-width: 120px;
                            width: 120px;
                            margin-left: 5px;
                            margin-right: 10px;
                            
                          "
                        ></el-input>
                      </div>
                    </div>
                  </div>
                    
                    <span style="margin-left: 10px">
                      <el-tag type="success">{{
                        typeList[item.questionType - 1]
                      }}</el-tag>
                    </span>
                </div>
              </div>
              <div
                v-if="item.questionDescription"
                style="
                  box-sizing: border-box;
                  padding-left: 30px;
                  font-size: 12px;
                  color: #ddd;
                  margin-bottom: 15px;
                "
              >
                {{ item.questionDescription }}
              </div>
              <!-- 单选选择题 -->
              <div v-if="item.questionType == 1">
                <el-radio-group>
                  <div v-for="(e, index) in item.optionList" :key="index">
                    <div class="flleft">
                      <el-radio :label="e.optionName" disabled>{{
                        e.optionName
                      }}</el-radio>

                      <div
                        :class="e.requiredFlag ? 'required fl' : 'fl'"
                        v-if="e.fillFlag == 1"
                      >
                        <el-input
          v-input-restrict placeholder="请输入内容" disabled></el-input>
                      </div>
                    </div>

                    <div style="padding-left: 40px">
                      <img
                        :src="e.optionPicUrl"
                        alt=""
                        v-if="e.optionPicUrl"
                        style="width: 40px"
                      />
                    </div>
                  </div>
                </el-radio-group>
              </div>
              <!-- 多选选择题 -->
              <div v-if="item.questionType == 2">
                <div v-for="(e, index) in item.optionList" :key="index">
                  <div class="flleft">
                    <el-checkbox :label="e.optionName" disabled>{{
                      e.optionName
                    }}</el-checkbox>

                    <div
                      :class="e.requiredFlag ? 'required fl mr' : 'fl mr'"
                      v-if="e.fillFlag == 1"
                    >
                      <el-input
          v-input-restrict placeholder="请输入内容" disabled></el-input>
                    </div>
                  </div>

                  <div style="padding-left: 40px">
                    <img
                      :src="e.optionPicUrl"
                      alt=""
                      v-if="e.optionPicUrl"
                      style="width: 40px"
                    />
                  </div>
                </div>
              </div>
              <!-- 简答题 -->
              <div v-if="item.questionType == 4" style="margin-left: 20px">
                <textarea
                  disabled
                  cols="60"
                  rows="5"
                  style="margin-top: 15px; border: 1px solid #ddd"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Questionmsg } from "../../../api/questions/updatequestion";
export default {
  name: "MixedStateAdminUpdateQuestion",

  data() {
    return {
      isshow: false,
      state: 1,
      survey: {},
      typeList: ["单选题", "多选题", "填空题", "简答题"],
    };
  },
  mounted() {},

  methods: {
    show(id) {
      let obj = {
        surveyId: id,
      };
      // 使用问卷id获取详细问卷
      Questionmsg(obj).then((res) => {
        this.survey = res.data;
        this.survey.questionList.map((i) => {
          if (i.questionType == 3) {
            i.questionNameList = i.questionName
              .split("_______")
              .map((i) => ({ name: i, value: "" }));
          }
          if (i.questionType == 2) {
            i.options = i.optionList.map((i) => ({
              optionId: "",
              answerContent: "",
            }));
          }
          return {
            questionId: i.id,
            ...i,
          };
        });
      });
      this.isshow = true;
    },
    // 取消
    cancle() {
      this.isshow = false;
    },
    // 确定
    confirm() {
      this.cancle();
    },
    changelook(val) {
      this.state = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.tip {
  color: rgba(255, 141, 26, 1);
}
.toptitle {
  display: flex;
  justify-content: space-around;
  margin: 0px;
}
.btns {
  display: flex;
}
.btnitem {
  text-align: center;
  font-size: 16px;
  padding: 20px;
}
.a {
  background-color: rgba(39, 196, 120, 1);
  color: #fff;
}
.btnicon {
  font-size: 30px;
  margin-bottom: 15px;
}
::v-deep .el-dialog .el-dialog__header {
  padding: 0px !important;
}
::v-deep .el-dialog__header {
  padding: 0px !important;
}
::v-deep.el-dialog .el-dialog__body {
  padding: 0px !important;
}
::v-deep .el-dialog__body {
  padding: 0px !important;
}
.toptip {
  line-height: 100px;
}
.content {
  width: 100%;
  background-color: #f5f5f5;
}
.phone {
  width: 500px;
  height: 648px;
  background-color: #fff;
  margin: auto;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
}
.computer {
  width: 100%;
  height: 648px;
  background-color: #fff;
  margin: auto;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
}
.questiontitle {
  border-bottom: 1px dotted #ddd;
  margin: auto;
  .questionname {
    width: 198px;
    margin: auto;
    text-align: center;
    margin-top: 30px;
    color: rgba(39, 196, 120, 1);
    font-size: 18px;
    line-height: 25px;
  }
  .questiontext {
    width: 300px;
    margin: auto;
    margin-bottom: 20px;
    text-align: center;
    margin-top: 30px;
    font-size: 16px;
    line-height: 25px;
  }
}
.computername {
  width: 500px;
  margin: auto;
  text-align: center;
  margin-top: 30px;
  color: rgba(39, 196, 120, 1);
  font-size: 18px;
  line-height: 28px;
}
.computertext {
  color: #df801f;
  width: 800px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 25px;
}
.phonetext {
  color: #df801f;
  width: 445px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 25px;
}
.questions {
  width: 449px;
  margin: auto;
  margin-top: 10px;
}
.computerquestions {
  padding: 30px 60px;
  width: 100%;
  margin: auto;
  margin-top: 10px;
}
.computerquestions > div {
  margin-bottom: 30px;
}
.itemtitle {
  min-width: 40px;
  display: flex;
  // margin-bottom: 15px;
  align-items: baseline;
}
.computertitle {
  border-bottom: 1px dotted #ddd;
}
.questions > div {
  // margin-bottom: 15px;
  // margin-top: 15px;
  padding: 20px 0px;
  box-sizing: border-box;
  border-bottom: 1px dotted #ddd;
}
.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.flleft {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px;
  font-size: 20px;
}
.fl {
  display: flex;

  align-items: center;

  justify-content: flex-start;
}
.mr {
  margin-left: 20px;
}
.titspace::before {
  content: " ";
  margin-right: 8px;
}
.multTitle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  .gapFill {
    display: flex;
    align-items: baseline;
    // flex-wrap: wrap;
  }
}
.textstyle {
  line-height: 100%;
}
::v-deep p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // white-space:nowrap;
}
::v-deep p > img {
  margin: 0px 10px;
}
</style>